const http = require("http");
const path = require("path");
const fs = require("fs");
const url = require("url");

const basePath = "http://localhost:3000";
const port = 3000;

http.createServer((req, res) => {
    /**资源路径是upload，get请求时返回upload.html页面 */
    let urlObj = url.parse(req.url, true);
    let pathname = urlObj.pathname;
    let method = req.method;

    console.log(`${method} ${pathname}`);

    // 设置响应头
    res.setHeader('Content-Type', 'text/html; charset=utf-8');

    if (pathname === '/upload' && method === 'GET') {
        // 返回 upload.html 页面
        const uploadHtmlPath = path.join(__dirname, 'upload.html');
        
        fs.readFile(uploadHtmlPath, 'utf8', (err, data) => {
            if (err) {
                res.statusCode = 404;
                res.end(`
                    <h1>404 - 页面未找到</h1>
                    <p>upload.html 文件不存在</p>
                    <p>请在同目录下创建 upload.html 文件</p>
                `);
                return;
            }
            
            res.statusCode = 200;
            res.end(data);
        });
    } 
    else if (pathname === '/upload' && method === 'POST') {
        // 处理文件上传（POST请求）
        let body = '';
        
        req.on('data', (chunk) => {
            body += chunk.toString();
        });
        
        req.on('end', () => {
            res.statusCode = 200;
            res.end(`
                <h1>上传成功</h1>
                <p>文件已接收</p>
                <a href="/upload">返回上传页面</a>
            `);
        });
    }
    else if (pathname === '/') {
        // 首页
        res.statusCode = 200;
        res.end(`
            <!DOCTYPE html>
            <html lang="zh-CN">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>文件上传服务</title>
                <style>
                    body { font-family: Arial, sans-serif; margin: 40px; background: #f5f5f5; }
                    .container { max-width: 600px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
                    h1 { color: #333; text-align: center; }
                    .btn { display: inline-block; padding: 12px 24px; background: #007bff; color: white; text-decoration: none; border-radius: 4px; margin: 10px 0; }
                    .btn:hover { background: #0056b3; }
                </style>
            </head>
            <body>
                <div class="container">
                    <h1>文件上传服务</h1>
                    <p>欢迎使用文件上传服务！</p>
                    <a href="/upload" class="btn">进入上传页面</a>
                </div>
            </body>
            </html>
        `);
    }
    else {
        // 404 页面
        res.statusCode = 404;
        res.end(`
            <h1>404 - 页面未找到</h1>
            <p>请求的路径 ${pathname} 不存在</p>
            <a href="/">返回首页</a>
        `);
    }

}).listen(port, () => {
    console.log(`服务器已启动，访问地址：${basePath}`);
    console.log(`上传页面：${basePath}/upload`);
});